<template>
    <el-card class="el-card">
        <el-row :gutter="20">
            <router-link to="/translate" custom v-slot="{ navigate }">
                <el-col :span="8">
                    <div class="home-item" @click="navigate">
                        <div class="home-item__title">
                            <span>项目翻译</span>
                        </div>
                        <div class="home-item__content">
                            <span>选择项目文件进行中文识别和翻译，支持简体,繁体及英文翻译服务</span>
                        </div>
                    </div>
                </el-col>
            </router-link>
            <router-link to="/simple" custom v-slot="{ navigate }">
                <el-col :span="8">
                    <div class="home-item" @click="navigate">
                        <div class="home-item__title">
                            <span>简体转换</span>
                        </div>
                        <div class="home-item__content">
                            <span>快速识别代码中的简体中文文本，手动转换为繁体并替换原文件</span>
                        </div>
                    </div>
                </el-col>
            </router-link>
            <router-link to="/setting" custom v-slot="{ navigate }">
                <el-col :span="8">
                    <div class="home-item" @click="navigate">
                        <div class="home-item__title">
                            <span>设置</span>
                        </div>
                        <div class="home-item__content">
                            <span>配置翻译服务、排除文件夹规则和其他应用参数</span>
                        </div>
                    </div>
                </el-col>
            </router-link>
        </el-row>
    </el-card>
</template>

<script lang="ts" setup>
defineOptions({ name: 'Home' })
</script>


<style lang="scss" scoped>
.el-card {
    height: 100%;
}

.home-item {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 0 2px #eee;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.home-item:hover {
    box-shadow: 0 0 6px #ddd;
}

.home-item__title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
}

.home-item__content {
    display: flex;
    margin-top: 20px;
    font-size: 14px;
    color: #555;
}
</style>